logo头像
Snippet 博客主题

Flutter app 1.login

Flutter Flutter 2018/09/18

Flutter app 1.login

1.创建新项目

2. 创建 login

1. 创建目录

pages

在 pages 目录下创建 LoginPage.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class LoginPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _LoginPageState();
  }
}

class _LoginPageState extends State<LoginPage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child:  new Text(
              'hello ',
            ),
        ),
    );
  }
}

main.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
import 'package:flutter/material.dart';
import 'package:flutter_snap/pages/LoginPage.dart';



void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new LoginPage(),
    ),
  );
}

3.添加 登录UI

title bar

1
2
3
4
5
6
7
8
9
10
@override
  Widget build(BuildContext context) {
    return new Material(
      child: new Scaffold(
        key: registKey,
        backgroundColor: Colors.white,
        body:   _buildBody(),
      ),
    );
  }
1
2
3
4
5
6
7
Widget _buildBody(){
    return new ListView(
      children: <Widget>[
        _buildCustomBar(),
      ],
    );
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// title Bar
  Widget _buildCustomBar() {
    return new Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween, //子组件的排列方式为主轴两端对齐
      children: <Widget>[
        new InkWell(
          child: new Padding(
              padding: const EdgeInsets.all(12.0),
              child: new Icon(
                Icons.chevron_left,
                size: 26.0,
                color: Colors.grey[700],
              )),
          onTap: () {
            Navigator.pop(context);
          },
        ),

        new InkWell(
          child: new Padding(
              padding: const EdgeInsets.all(12.0),
              child: new Text(
                "Create account",
                style: new TextStyle(fontSize: 18.0, color: Colors.grey[900]),
              )),
          onTap: () {
            showTips();
          },
        ),

        new InkWell(
          child: new Padding(
              padding: const EdgeInsets.all(12.0),
              child: new Text(
                "Login",
                style: new TextStyle(fontSize: 16.0, color: Colors.grey[700]),
              )),
          onTap: () {
            showTips();
          },
        ),
      ],
    );
  }

Account 输入框

1
2
3
4
5
6
7
8
9
10
11
12
Widget _buildBody(){
    if (_isLoading) {
      return _buildLoading();
    } else {
      return new ListView(
        children: <Widget>[
          _buildCustomBar(),
          _buildAccountEdit(),
        ],
      );;
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Widget _buildAccountEdit() {
    var node = new FocusNode();
    return new Padding(
      padding: const EdgeInsets.only(left: 40.0, right: 40.0),
      child: new TextField(
        onChanged: (str) {
          _email = str;
          setState(() {});
        },
        decoration: new InputDecoration(
          hintText: 'Email address',
        ),
        maxLines: 1,  //行数
        maxLength: 50, //
        //键盘展示为号码
        keyboardType: TextInputType.emailAddress,
        //只能输入数字
//        inputFormatters: <TextInputFormatter>[
//          WhitelistingTextInputFormatter.digitsOnly,
//        ],
        onSubmitted: (text) {
          print("onSubmitted");
          FocusScope.of(context).reparentIfNeeded(node);
        },
      ),
    );
  }

密码 输入框

1
2
3
4
5
6
7
8
9
10
11
12
13
Widget _buildBody(){
    if (_isLoading) {
      return _buildLoading();
    } else {
      return new ListView(
        children: <Widget>[
          _buildCustomBar(),
          _buildAccountEdit(),
          _buildPWDEdit(),
        ],
      );;
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Widget _buildPWDEdit() {
    var node = new FocusNode();
    Widget verifyCodeEdit = new TextField(
      onChanged: (str) {
        _pwd = str;
        setState(() {});
      },
      decoration: new InputDecoration(
        hintText: '请输入密码',
      ),
      maxLines: 1,
      maxLength: 50,
      //键盘展示为数字
      keyboardType: TextInputType.text,
//      inputFormatters: <TextInputFormatter>[
//        WhitelistingTextInputFormatter.digitsOnly,
//      ],
      onSubmitted: (text) {
        FocusScope.of(context).reparentIfNeeded(node);
      },
    );

登录按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Widget _buildBody(){
    if (_isLoading) {
      return _buildLoading();
    } else {
      return new ListView(
        children: <Widget>[
          _buildCustomBar(),
          _buildAccountEdit(),
          _buildPWDEdit(),
          _buildLogin(),
        ],
      );;
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Widget _buildLogin() {
    return new Padding(
      padding: const EdgeInsets.only(left: 40.0, right: 40.0, top: 20.0),
      child: new RaisedButton(
        color: Colors.blue,
        textColor: Colors.white,
        disabledColor: Colors.blue[100],
        onPressed: (_email.isEmpty || _pwd.length < 8 ) ? null : () {
          showTips();
        },
        child: new Text(
          "登  录",
          style: new TextStyle(fontSize: 16.0),
        ),
      ),
    );
  }

忘记密码 注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Widget _buildBody(){
    if (_isLoading) {
      return _buildLoading();
    } else {
      return new ListView(
        children: <Widget>[
          _buildCustomBar(),
          _buildAccountEdit(),
          _buildPWDEdit(),
          _buildLogin(),
          _buildTips(),
        ],
      );
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Widget _buildTips() {
    return new Padding(
      padding: const EdgeInsets.only(left: 40.0, right: 40.0, top: 20.0),
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween, //子组件的排列方式为主轴两端对齐
        children: <Widget>[
          new Text(
            "注册",
            style: new TextStyle(fontSize: 14.0, color: Colors.blue),
          ),
          new Text(
            "忘记密码",
            style: new TextStyle(fontSize: 14.0, color: Colors.blue),
          ),
        ],
      ),
    );
  }

4.添加 登录功能

点击登陆执行 showTips() 方法

添加网络请求
pubspec.yaml 文件中添加

http: '>=0.11.3+12'

添加请求业务

1
2
3
4
5
showTips() async {
    var httpClient = createHttpClient();
    var response = await httpClient.post(Api.AuthenCross, body: {'user': 'las@sengled.com', 'pwd': '123456','osType':'android','appCode':'snap','productCode':'snap' });
    print('Response status: ${response.body}');
  }

返回数据不对 存在问题

HTTP Status 415

不知道什么原因

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
showTips() async {
    //TODO loading
    setState( () {
        _isLoading = true;
      },
    );

    Map map = {
      'user': 'las@sengled.com',
      'pwd': '123456',
      'osType':'android',
      'uuid':'4CC09670-0623-497B-AB82-F48611FA4C42',
      'appCode':'snap',
      'productCode':'snap'
    };

    print(Api.AuthenCross);
    print(json.encode(map));

    print(await apiRequest(Api.AuthenCross, map));

  }

  Future<String> apiRequest(String url, Map jsonMap) async {

    HttpClient httpClient = new HttpClient();
    HttpClientRequest request = await httpClient.postUrl(Uri.parse(url));
    request.headers.set('content-type', 'application/json');
    request.add(utf8.encode(json.encode(jsonMap)));
    HttpClientResponse response = await request.close();
    // todo - you should check the response.statusCode
    String reply = await response.transform(utf8.decoder).join();
    httpClient.close();
    return reply;
  }

返回结果

1
2
3
 
I/flutter ( 8344): {"user":"las@sengled.com","pwd":"123456","osType":"android","uuid":"4CC09670-0623-497B-AB82-F48611FA4C42","appCode":"snap","productCode":"snap"}
I/flutter ( 8344): {"ret":0,"msg":"success","customerId":168

赏
支付宝打赏 微信打赏

打赏

转载声明：商业转载请联系作者获得授权,非商业转载请注明出处 © Snippet
Copyright © 2017 | Powered by Hexo | Theme by Snippet